<template>
<!--  组件结构-->
  <div class="school">
      <h2>{{msg}}</h2>
      <h3>姓名：{{name}}</h3>
      <h3>年龄：{{mayage+1}}</h3>
      <h3>性别：{{sex}}</h3>
    <button @click="updateage">点我修改年龄</button>
  </div>
</template>

<script>
//组件交互相关代码（数据、方法等）
   export default{
     name:'Student',
    data(){
      return {
        msg:'我是召唤师峡谷的一名英雄',
        mayage:this.age
        }
    },
     methods:{
       updateage(){
            this.mayage++
       }
     },
     // props:['name','age','sex']   //简单接收
     //接受的同时对数据进行类型限制
     /*props:{
       name:String,
       age:Number,
       sex:String
     }*/

     //接受数据同时对数据，进行类型限制、默认值指定、必要性的限制
     props:{
       name:{
         type:String,  //name类型是字符串
         required:true  //name是必要的
       },
       age:{
         type:Number,
         default:99     //默认值
       },
       sex:{
         type:String,
         required: true
       }
     }
  }

</script>

<style>
/*组件样式*/
  .school{
    background-color: rgb(19, 122, 88);
  }
</style>